<template>
	<view :class="info ? ' pb-20' : ''" v-if="filterBtn.length > 0" @click.stop>
		<view class="flex ac jb" :class="info ? ' ios' : ''"
			:style="{ padding: padding, borderTop: unborder ? 'unset' : '2rpx solid #f7f7f7' }">
			<text class="bottom-btn-box-tips" v-if="info">操作</text>
			<view class="flex ac je" style="flex: 1">
				<template v-if="filterBtn.length > num">
					<u-button v-for="(item, index) in filterBtn.slice(0, num)" :key="index" @click="onClick(item)"
						:plain="plain" type="primary" color="#3B75FF"
						customStyle="width: auto;height: 58rpx;border-radius: 12rpx;font-weight: 400;float: left;padding:0 20rpx;">
						<text style="font-size: 24rpx">{{ item.name }}</text>
					</u-button>
					<fui-dropdown-menu :size="26" :isCheckbox="false" :options="filterBtn.slice(num, filterBtn.length)"
						:right="0" splitLine direction="up" @click.stop="rangeItemClick" @close="rangeClose"
						ref="ddmRange">
						<view class="fui-filter__item" @tap.stop="filterTap">
							<view class="more flex ac jc">
								<u-icon name="more-dot-fill"></u-icon>
							</view>
						</view>
					</fui-dropdown-menu>
				</template>

				<template v-else>
					<u-button v-for="(item, index) in filterBtn" :key="index" @click.stop="onClick(item)" :plain="plain"
						type="primary" color="#3B75FF"
						customStyle="width: auto;height: 58rpx;border-radius: 12rpx;font-weight: 400;float: left;padding:0 20rpx;">
						<text style="font-size: 24rpx">{{ item.name }}</text>
					</u-button>
				</template>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: 'judgeBtn',
		inject: {
			providedData: {
				from: 'providedData',
				default: []
			}
		},
		props: {
			// 本页面权限数组
			per_arr: {
				default: []
			},
			// 操作的数据
			item: {
				type: Object,
				default: 0
			},
			// 当前的状态
			state: {
				type: Number,
				default: 0
			},
			// 本页面要显示的按钮
			btns: {
				type: Array,
				default: []
			},
			// 按钮实心还是镂空
			plain: {
				type: Boolean,
				default: false
			},
			// 显示个数
			num: {
				type: Number,
				default: 3
			},
			padding: {
				type: String,
				default: '20rpx 0'
			},
			unborder: {
				type: Boolean,
				default: false
			},
			info: {
				type: Boolean,
				default: false
			},
			// 是否项目，采用传入func判断
			objectType: {
				type: String,
				default: ''
			},
			idx: {
				type: Number,
				default: -1
			}
		},
		watch: {
			state() {
				this.init()
			}
		},
		data() {
			return {
				filterBtn: [],
				rangeShow: false
			};
		},
		mounted() {
			// this.state, this.per_arr,
			// console.log(this.per_arr);
			this.init()
		},
		methods: {
			// 状态处理
			init() {
				console.log("按钮初始化")
				let state = this.state;
				let per_arr = this.per_arr;
				let dataObj = this.item; //当前条的数据
				let filterBtn = [];
				let btns = this.objectType ? this.providedData : this.btns;
				btns.map((item) => {
					// 判断权限
					let isPer = false;
					// 多权限，数组格式
					if (typeof item.per_name == 'object') {
						for (let i = 0; i < item.per_name.length; i++) {
							let index = per_arr.findIndex(child => {
								return child == item.per_name[i];
							})
							if (index != -1) {
								isPer = true;
								break;
							}
						}
					} else {
						// 单权限，字符串格式
						isPer = per_arr.includes(item.per_name);
					}
					if (isPer) {
						// 通用则直接加入
						if (item.state === 0) {
							filterBtn.push(item);
						} else {
							// console.log('按钮添加', item);
							// 多条件判断/不全等
							if (item.func) {
								if (item.func(dataObj)) {
									filterBtn.push(item);
								}
								return;
							}

							// 判断是否是对应状态
							if (state == item.state) {
								filterBtn.push(item);
							}
						}
					}
				});
				this.filterBtn = filterBtn;
			},

			filterTap() {
				//显示下拉框
				this.$refs.ddmRange.show();
				this.rangeShow = true;
			},
			rangeItemClick(e) {
				this.onClick(e);
				this.rangeClose();
			},
			rangeClose() {
				this.rangeShow = false;
			},

			onClick(e) {
				e.item = this.item;
				e.index = this.idx;
				this.$emit('change', e);
			}
		}
	};
</script>

<style lang="scss">
	button+button {
		margin-left: 10rpx;
	}

	.more {
		position: relative;
		margin-left: 10rpx;
		width: 58rpx;
		height: 58rpx;
		border: 2rpx solid #acb0b0;
		border-radius: 12rpx;
	}

	.bottom-btn-box-tips {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.pb-20 {
		padding-bottom: 20rpx;
	}
</style>